<template>
	<div>
		<el-dialog :visible.sync="isShowdialog" :destroy-on-close="true" width="520px" center :before-close="clearInput"
			@close="clearInput">
			<el-form ref="formSub" :model="dialogForm" @submit.native.prevent>
				<el-form-item class="form-box" :label="`${valaditeKeyInfo.title}:`" prop="googleKeyText"
					label-width="110px" :rules="[
						{
							required: true,
							message: valaditeKeyInfo.tips,
							trigger: 'change'
						}
					]">
					<el-input v-model="dialogForm.googleKeyText" type="text" style="width: 330px"
						:placeholder="valaditeKeyInfo.tips" clearable v-input="{ name: 'num_alp' }"
						maxlength="6"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="clearInput">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="validateGoogleKey" :loading="submitLoading">
					{{ $t('common.sure') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import list from '@/mixins/list'
export default {
	name: 'GoogleKeyInput',
	mixins: [list],
	props: {
		isShowdialog: {
			type: Boolean,
			default: false
		},
		submitLoading: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			dialogForm: {
				googleKeyText: undefined
			},
			valaditeKeyInfo: {}
		}
	},
	computed: {},
	watch: {
		isShowdialog: {
			handler(val) {
				if (val === true) {
					// 默认谷歌密钥
					this.valaditeKeyInfo = {
						title: this.$t('common.google_key'),
						tips: this.$t('common.please_enter_google_key')
					}
					this.getValidateKeyType()
				}
			},
			immediate: true,
			deep: true
		}
	},
	created() {
		// // 默认谷歌密钥
		// this.valaditeKeyInfo = {
		// 	title: this.$t('common.google_key'),
		// 	tips: this.$t('common.please_enter_google_key')
		// }
		// this.getValidateKeyType()
	},
	methods: {
		// 获取密钥验证方式
		async getValidateKeyType() {
			await this.$api
				.getSystemValidateKeyType()
				.then((res) => {
					// 验证码类型: 1-谷歌验证码 2-图形验证码（暂未使用） 3-海月盾
					const validateKeyType = res?.data?.verifyCodeType || 1
					if (validateKeyType === 3) {
						// 海月盾密钥
						this.valaditeKeyInfo = {
							title: this.$t('common.seamoon_key'),
							tips: this.$t('common.please_enter_seamoon_key')
						}
					} else {
						// 谷歌密钥
						this.valaditeKeyInfo = {
							title: this.$t('common.google_key'),
							tips: this.$t('common.please_enter_google_key')
						}
					}
				})
				.catch(() => { })
		},
		validateGoogleKey() {
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.$emit('getGoogleKey', this.dialogForm.googleKeyText)
				}
			})
		},
		clearInput() {
			this.dialogForm = {}
			this.$emit('backPrevStep')
		}
	}
}
</script>
<style lang="scss" scoped></style>
